<template>
    <div class="collect">
        <div class="header">{{ $t('msg.收藏') }}</div>

        <div class="list">
            <div class="item_view" v-for="(item, index) in list" :key="index">
                <div class="item">
                    <img :src="item.goods.images[0]" alt="" class="cover">
                    <div class="name">{{ item.goods.name }}</div>
                    <div class="other">
                        <div class="price">
                            <div class="unit">￥</div>
                            <div class="value">{{ item.goods.price }}</div>
                        </div>
                        <el-button class="submit" @click="submit(item)">{{ $t('msg.查看') }}</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div style="display: flex;align-items: center;justify-content: center;">
            <el-pagination background layout="prev, pager, next" :current-page="page" :total="total"
                @current-change="change" />
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {
            active: -1,
            page: 1,
            list: [],
            total: 0
        }
    },
    computed: {
        ...mapState(['contactKeywords'])
    },
    watch: {
        contactKeywords: {
            handler(newVal) {
                this.keywords = newVal;
                this.getList();
            },
            immediate: true
        }
    },
    methods: {
        async getList() {
            let { list: res } = await this.$api.shopApi.favoriteList({
                page: this.page,
                page_size: 30,
                keyword: this.keywords
            });
            this.total = res.total;
            this.list = res.data;
        },
        change(value) {
            this.page = value;
            this.getList();
        },
        submit(item) {
            let id = item.goods_id;
            this.$router.push({
                name: 'mallDeta',
                query: { id }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.collect {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #fff;

    .header {
        height: 92px;
        line-height: 92px;
        font-size: 20px;
        color: #333333;
        padding: 0 24px;
        box-sizing: border-box;
        background: #FCFCFE;
        box-shadow: inset 0px -1px 0px 0px rgba(104, 104, 104, 0.1);
    }

    .list {
        flex: 1;
        padding: 24px 24px 0;
        box-sizing: border-box;
        cursor: default;
        display: flex;
        flex-wrap: wrap;

        .item_view {
            // flex: 1;
            width: 284px;
            padding: 0 10px;
            box-sizing: border-box;
        }

        .item {
            width: 264px;
            margin-bottom: 18px;

            .cover {
                width: 264px;
                height: 264px;
                border-radius: 20px;
            }

            .name {
                height: 44px;
                line-height: 22px;
                font-size: 16px;
                color: #000000;
                margin: 7px 0;
                box-sizing: content-box;

                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                /* 显示的行数 */
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .other {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .price {
                display: flex;
                align-items: baseline;

                .unit {
                    font-weight: bold;
                    font-size: 16px;
                    color: #FA5151;
                }

                .value {
                    font-weight: bold;
                    font-size: 24px;
                    color: #FA5151;
                }
            }

            .submit {
                width: 72px;
                height: 36px;
                // line-height: 36px;
                text-align: center;
                font-size: 16px;
                color: #FFFFFF;
                background: linear-gradient(270deg, #4488FF 0%, #2BBCFF 100%);
                border-radius: 66px 66px 66px 66px;
            }
        }
    }
}
</style>